<template ref="root">
    <div>
        <div class="classifyList">
            <div class="classifyItem" v-for="item in list" :key="item.subjectId" >
                <router-link :to="{path:'/search',query:{
                    pageNum: 1,
                    pageSize: 15,
                    type: '',
                    topicId: item.id,
                    keyword: '',
                    courseType: ''
                }}">{{ item.topicName }}</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import { getClassifyList } from '@/api/request'
export default {
    name: 'ClassifyList',
    data() {
        return {
            // 保存分类列表信息
            list: [],
        }
    },
    created() {
        getClassifyList().then(res => {
            this.list = res.data.rows
            console.log('getClassifyList', this.list)
        })
    }
}
</script>

<style lang="less" scoped>
a {
    text-decoration: none;
    &:link,
    &:visited,
    &:hover,
    &:active {
        color: inherit;
    }

}

.classifyList {
    width: 150px;
    height: 300px;
    overflow-y: auto;
    background-color: #fff;

    color: rgba(0, 0, 0, 0.65);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;

    white-space: nowrap;
    transition: 0.3s;

    .classifyItem {
        padding: 5px 10px;

        &:hover {
            background-color: rgb(230, 255, 243);
        }
    }
}
</style>
